<template>
  <div class="home">
<!--    <header-component></header-component>-->
    <el-row :gutter="5" style="margin: 0;">
      <el-col :span="18" >
    <el-carousel style="height: 300px;">
      <el-carousel-item v-for="item in bannerArr" >
        <img :src="item" style="width: 100%;height: 100%;">
      </el-carousel-item>
    </el-carousel>
      </el-col>
      <el-col :span="6">
        <!--       <el-icon style="font-size: 30px;"><TrophyBase /></el-icon>-->
        <!--        <span style="font-size: 25px;">销量榜</span>-->
        <!--        <br>-->
        <el-table :data="arr" style="width: 350px;margin: 0 auto;" >
          <el-table-column prop="title" label="销量榜" width="100" align="center">
            <el-table-column label="编号" type="index" width="80" align="center" ></el-table-column>
            <el-table-column label="商品名" prop="name" align="center"></el-table-column>
            <el-table-column label="销量" prop="number" align="center"></el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <div class="product-list">
      <div
          class="product-item"
          v-for="item in products"
          :key="item.id"
          @click="goToDetail(item.id)"
          style="margin-top: 15px"
      >
        <img :src="item.url" />
        <h3>{{ item.title }}</h3>
        <p>￥{{ item.saleCount }}</p>
      </div>
    </div>
  </div>
</template>


<script>
import headerComponent from "../../components/public.vue"
import {ref} from "vue";
export default {
  name: 'UserView',
  components:{
    headerComponent
  },
  data () {
    return {
      arr:[
        {name: "小米手机", number:5000,},
        {name: "华为手表", number:4400,},
        {name: "毛巾", number:3800,},
        {name: "双飞燕鼠标", number:2600,},
        {name: "耐克篮球", number:1800,},
        {name: "阿迪袜子", number:1100,}
          ],

      // 轮播图数据
      bannerArr: ["/imgs/banner1.jpg","/imgs/banner2.jpg","/imgs/banner3.jpg", "/imgs/banner4.jpg", "/imgs/banner5.jpg"],
      products: [{id: 1,title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
    {
      id:2,title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
        price: 233,
        oldPrice: 598,
        url: "/imgs/b.jpg",
        saleCount: 2342
    },
    {id:3,
        title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季",
        price: 233,
        oldPrice: 598,
        url: "/imgs/c.jpg",
        saleCount: 2342
    },
    {id:4,
        title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚",
        price: 233,
        oldPrice: 598,
        url: "/imgs/d.jpg",
        saleCount: 2342
    },
    {id:5,
        title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花",
        price: 233,
        oldPrice: 598,
        url: "/imgs/e.jpg",
        saleCount: 2342
    },
    {id:6,
        title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领",
        price: 233,
        oldPrice: 598,
        url: "/imgs/f.jpg",
        saleCount: 2342
    },
    {id:7,
        title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",
        price: 233,
        oldPrice: 598,
        url: "/imgs/g.jpg",
        saleCount: 2342
    },
    {id:8,title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
    {id:9,
        title: "imone2021秋款黑色小西装外套女韩版学生宽松学",
        price: 233,
        oldPrice: 598,
        url: "/imgs/i.jpg",
        saleCount: 2342
    },
    {id:10,
        title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫",
        price: 233,
        oldPrice: 598,
        url: "/imgs/j.jpg",
        saleCount: 2342
    },
    {id:11,
        title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修",
        price: 233,
        oldPrice: 598,
        url: "/imgs/k.jpg",
        saleCount: 2342
    },
    {id:12,
        title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色",
        price: 233,
        oldPrice: 598,
        url: "/imgs/l.jpg",
        saleCount: 2342
    },
    {id: 13,title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
    {
      id:14,title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
        price: 233,
        oldPrice: 598,
        url: "/imgs/b.jpg",
        saleCount: 2342
    },
    {id:15,
        title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季",
        price: 233,
        oldPrice: 598,
        url: "/imgs/c.jpg",
        saleCount: 2342
    },
    {id:16,
        title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚",
        price: 233,
        oldPrice: 598,
        url: "/imgs/d.jpg",
        saleCount: 2342
    },
    {id:17,
        title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花",
        price: 233,
        oldPrice: 598,
        url: "/imgs/e.jpg",
        saleCount: 2342
    },
    {id:18,
        title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领",
        price: 233,
        oldPrice: 598,
        url: "/imgs/f.jpg",
        saleCount: 2342
    },
    {id:19,
        title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",
        price: 233,
        oldPrice: 598,
        url: "/imgs/g.jpg",
        saleCount: 2342
    },
    {id:20,title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
    {id:21,
        title: "imone2021秋款黑色小西装外套女韩版学生宽松学",
        price: 233,
        oldPrice: 598,
        url: "/imgs/i.jpg",
        saleCount: 2342
    },
    {id:22,
        title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫",
        price: 233,
        oldPrice: 598,
        url: "/imgs/j.jpg",
        saleCount: 2342
    },
    {id:23,
        title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修",
        price: 233,
        oldPrice: 598,
        url: "/imgs/k.jpg",
        saleCount: 2342
    },
    {id:24,
        title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色",
        price: 233,
        oldPrice: 598,
        url: "/imgs/l.jpg",
        saleCount: 2342}]
    }
  },
  methods: {
    goToDetail (id) {
      this.$router.push(
          {
            path: 'information',
            query: {
              id: id
            }
          }
      );
    }
  }
}


</script>

<style scoped>
.home {
  text-align: center;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.product-item {
  width: 200px;
  cursor: pointer;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.product-item:hover {
  transform: scale(1.05);
}

.product-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.product-item h3 {
  margin-top: 10px;
  font-size: 16px;
}

.product-item p {
  margin-top: 5px;
  color: #f00;
}
h3{
  white-space: nowrap;/*强制文本不换行*/
  overflow: hidden;/*溢出隐藏*/
  text-overflow: ellipsis;/*溢出文字替换为省略号
  */
}
*{
  margin: 0;
  padding: 0;
}
</style>